<template>
    <div>
        <div class="chartBody">
            <div class="body-content-info">
                <h2>近一周访问量</h2>
                <div id="weekData"
                     v-loading="weekDataLoading"
                     class="chartClass"
                ></div>
            </div>
            <div class="body-content-info">
                <h2>近24小时访问量</h2>
                <div id="dayData"
                     v-loading="dayDataLoading"
                     class="chartClass"
                ></div>
            </div>
        </div>
        <div class="table-page">
            <div class="table-search-box" @keyup.enter="search()">
<!--                <div class="search-item">-->
<!--                    <label>用户类型：</label>-->
<!--                    <div class="table-query-input">-->
<!--                        <el-select-->
<!--                            v-model="queryData.logUserType"-->
<!--                            filterable-->
<!--                            clearable-->
<!--                            placeholder="所有"-->
<!--                        >-->
<!--                            <el-option-->
<!--                                v-for="item in userTypes"-->
<!--                                :key="item.label"-->
<!--                                :label="item.label"-->
<!--                                :value="item.value"-->
<!--                            >-->
<!--                            </el-option>-->
<!--                        </el-select>-->
<!--                    </div>-->
<!--                </div>-->
                <div class="search-item">
                    <label>机构名称：</label>
                    <div class="table-query-input">
                        <el-select
                            v-model="queryData.groupId"
                            filterable
                            clearable
                            placeholder="请选择机构"
                            remote
                            reserve-keyword
                            :remote-method="loadXx"
                        >
                            <el-option
                                v-for="item in departments"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <!--                <div class="search-item">
                                    <label>统计时间：</label>
                                    <el-date-picker
                                        v-model="queryData.time"
                                        type="daterange"
                                        :clearable="false"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期">
                                    </el-date-picker>
                                </div>-->
                <div class="search-item" style="display: block;">
                    <label>时间段：</label>
                    <el-date-picker
                        v-model="queryData.times"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                        :picker-options="pickerOptions"
                    >
                    </el-date-picker>
                </div>
                <div class="search-item">
                    <label>统计来源：</label>
                    <el-checkbox-group v-model="queryData.sourceTypes">
                        <el-checkbox v-for="type in sourceTypes" :key="type.value" :label="type.value">{{
                                type.label
                            }}
                        </el-checkbox>
                    </el-checkbox-group>
                </div>
                <div class="search-item">
                    <el-button
                        type="primary"
                        icon="el-icon-search"
                        :loading="tableLoading"
                        @click="clickSearch()"
                    >搜索
                    </el-button>
                </div>
                <div class="search-item">
                    <el-button
                        icon="el-icon-refresh"
                        :loading="tableLoading"
                        @click="resetSearch()"
                    >重置
                    </el-button>
                </div>

            </div>
            <div class="table-data-box">
                <el-table
                    ref="table"
                    v-loading="tableLoading"
                    :data="tableData"
                    border
                    style="width: 100%;min-height:40em"
                    row-key="id"
                >
                    <el-table-column
                        prop="name"
                        label="用户类型"
                    ></el-table-column>
                    <el-table-column prop="extra.accessLog" label="访问量">
                        <template v-slot:default="scope">
                            <p
                                v-html="dataShow(scope.row, 'accessLog')"
                            ></p></template
                        >
                    </el-table-column>
                    <el-table-column prop="extra.useLog" label="使用人次"
                    >
                        <template v-slot:default="scope">
                            <p v-html="dataShow(scope.row, 'useLog')"></p></template
                        >
                    </el-table-column>
                    <el-table-column prop="extra.paperUseLog" label="试卷使用量"
                    >
                        <template v-slot:default="scope">
                            <p
                                v-html="dataShow(scope.row, 'paperUseLog')"
                            ></p></template
                        >
                    </el-table-column>
                    <el-table-column prop="extra.questionUseLog" label="试题使用量"
                    >
                        <template v-slot:default="scope"
                        ><p
                            v-html="dataShow(scope.row, 'questionUseLog')"
                        ></p></template
                        >
                    </el-table-column>
                    <el-table-column prop="extra.registerLog" label="注册人数"
                    >
                        <template v-slot:default="scope"
                        ><p
                            v-html="dataShow(scope.row, 'registerLog')"
                        ></p></template
                        >
                    </el-table-column>
                    <el-table-column prop="extra.timeUseLog" label="使用时长(分钟)"
                    >
                        <template v-slot:default="scope"
                        ><p
                            v-html="dataShow(scope.row, 'timeUseLog')"
                        ></p></template
                        >
                    </el-table-column>
                    <el-table-column
                        prop="extra.timeUseLogAvg"
                        label="平均使用时长(分钟)"
                    >
                        <template v-slot:default="scope"
                        ><p
                            v-html="dataShow(scope.row, 'timeUseLogAvg')"
                        ></p></template
                        >
                    </el-table-column>
                    <el-table-column prop="extra.downloadLog" label="下载次数"
                    >
                        <template v-slot:default="scope"
                        ><p
                            v-html="dataShow(scope.row, 'downloadLog')"
                        ></p></template
                        >
                    </el-table-column>
                    <!--                    <el-table-column-->
                    <!--                        label="操作"-->
                    <!--                        align="center"-->
                    <!--                        width="300"-->
                    <!--                        fixed="right"-->
                    <!--                    >-->
                    <!--                        <template slot-scope="scope">-->
                    <!--                            <el-button-->
                    <!--                                v-if="!scope.row.edit"-->
                    <!--                                lass="primary"-->
                    <!--                                type="text"-->
                    <!--                                size="mini"-->
                    <!--                                icon="el-icon-edit"-->
                    <!--                                :loading="scope.row.opLoading"-->
                    <!--                                @click="-->
                    <!--                                groupLog(scope.row, '使用记录')-->
                    <!--                            "-->
                    <!--                            >详情-->
                    <!--                            </el-button>-->
                    <!--                        </template>-->
                    <!--                    </el-table-column>-->
                </el-table>
            </div>
            <el-dialog :title="groupLogFormTitle" :visible.sync="groupLogFormVisible" width="80%">
                <div class="el-dialog-div">
                    <group-use-log-component
                        v-if="groupLogFormVisible"
                        ref="groupLogFormRef"
                        :group-id="groupLogGrupId"
                        :time="queryData.time"
                        :group-name="groupLogGrupName"
                        :log-user-type="queryData.logUserType"
                        :need-permission="false"
                        :real-data="true"

                    >
                    </group-use-log-component>
                </div>
            </el-dialog>
        </div>

    </div>
</template>

<script>
import {TablePage} from "@/layout/mixin/iVue.js";
import {mapState} from "vuex";
import {get} from "@/api/request";
import groupUseLogComponent from "@/views/models/vrs/group/groupLogDetail";
import {listAddAll, logFiledSet, tableRow2ChildrenList} from "@/views/models/vrs/group/groupLog";

export default {
    name: "UserLog",
    components: {groupUseLogComponent},
    mixins: [TablePage],
    data() {
        return {
            departments: null,
            userTypes: [
                {label: "个人身份", value: "hasUserId"},
                {label: "机构用户", value: "hasGroupId"},
            ],
            queryData: {
                logUserType: null,
                sourceTypes: ["PcZhiYe", "PcGjtk", "AppZhiYe", "AppGjtk", "WpZSZhiYe", "WpZSGjtk"],
                regionCode: null,
                times: null,
                groupId: null,
            },
            format: {
                dateTimeFormat: "yyyy-MM-dd HH:mm:ss",
                dateFormat: "yyyy-MM-dd",
                monthFormat: "yyyy-MM",
                yearFormat: "yyyy"
            },
            sourceTypes: [
                {
                    "label": "PC-职业资格",
                    "value": "PcZhiYe"
                },
                {
                    "label": "PC-高教题库",
                    "value": "PcGjtk"
                },
                {
                    "label": "维普考试APP-职业资格",
                    "value": "AppZhiYe"
                },
                {
                    "label": "维普考试APP-高教题库",
                    "value": "AppGjtk"
                },
                {
                    "label": "维普掌上题库(微信端)-职业资格",
                    "value": "WpZSZhiYe"
                },
                {
                    "label": "维普掌上题库(微信端)-高教题库",
                    "value": "WpZSGjtk"
                },
            ],
            groupLogFormTitle: null,
            groupLogFormVisible: false,
            groupLogGrupId: null,
            groupLogGrupName: null,
            flag: {
                areaFlag: false,
                regionFlag: false,
            },
            weekEchart: null,
            dayEchart: null,
            weekDataLoading: false,
            dayDataLoading: false,
            weekOptions: {
                xAxis: {
                    name: "日期",
                    boundaryGap: false,
                    data: []
                },
                yAxis: {},
                series: [
                    {
                        name: "访问量",
                        type: "line",
                        data: []
                    }
                ]
            },
            dayOptions: {
                xAxis: {
                    axisLabel: { //设置x轴的字
                        show: true,
                        interval: 0,
                        rotate: 10,
                    },
                    dataZoom: [
                        {
                            show: true,
                            start: 0,
                            end: 50
                        }
                    ],
                    type: "category",
                    boundaryGap: false,
                    name: "类型",
                    data: []
                },
                yAxis: {},
                series: [
                    {
                        name: "访问量",
                        type: "line",
                        data: []
                    }
                ]
            },

        };
    },
    computed: {
        pickerOptions() {
            return {
                shortcuts: [
                    {
                        text: "最近一周",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 7
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    },
                    {
                        text: "最近一个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 30
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    },
                    {
                        text: "最近三个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 90
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    }
                ]
            };
        },
        ...mapState({})
    },
    watch: {},
    created() {

    },
    mounted() {
        this.queryData.times=null;
        this.initEcharts();
        this.search();

    },
    methods: {
        initWeek() {
            this.weekDataLoading = true;
            this.weekEchart = this.$echarts.init(document.getElementById("weekData"));
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 6 * 24);
            let e = end.format(this.format.dateFormat)
            let s = start.format(this.format.dateFormat)
            get("/log-records/last-week-access", {
                groupId: -1,
                sourceTypes: this.queryData.sourceTypes,
                start: s,
                end: e,
            }).then(res => {
                this.weekOptions.xAxis.data = res.x || [];
                this.weekOptions.series[0].data = res.value || [];
                this.weekEchart.setOption(this.weekOptions)
            }).finally(() => this.weekDataLoading = false)


        },
        initDay() {
            this.dayDataLoading = true;
            this.dayEchart = this.$echarts.init(document.getElementById("dayData"));
            const end = new Date();
            let e = end.format(this.format.dateFormat)
            get("/log-records/last-day-access", {
                groupId: -1,
                sourceTypes: this.queryData.sourceTypes,
                start: e,
                end: e,
            }).then(res => {
                this.dayOptions.xAxis.data = res.x || [];
                this.dayOptions.series[0].data = res.value || [];
                this.dayEchart.setOption(this.dayOptions)
            }).finally(() => this.dayDataLoading = false)

        },
        initEcharts() {
            this.initWeek();
            this.initDay();
            this.loadXx();
        },
        loadXx(query) {
            return get("/user/sys/group/list", {
                name: query,
                size: 1000
            }).then(res => {
                this.departments = res
            });
        },
        search(queryData) {
            const w = () => {
                this.tableLoading = true;
                if (this.queryData.groupId ) {
                    this.tableData.unshift({
                        id:3,
                        number: this.queryData.groupId,
                        name: "机构用户",
                        children: null
                    });
                } else {

                    this.tableData.unshift({
                        id:1,
                        number: 0,
                        name: "个人用户",
                        children: null
                    });
                    this.tableData.unshift({
                        id: 2,
                        number: -1,
                        name: "机构用户",
                        children: null
                    });
                }
            }
            const w1 = () => {
                return Promise.all(
                    this.tableData.map(row => {
                        let s = this.queryData.times && this.queryData.times[0];
                        let e = this.queryData.times && this.queryData.times[1];

                        return get("/log-records/admin-record-list", {
                            groupId: row.number,
                            sourceTypes: this.queryData.sourceTypes,
                            start: s ? s : undefined,
                            end: e ? e : undefined
                        })
                            .then(v => {
                                return listAddAll(v);
                            })
                            .then(result => {
                                logFiledSet(this, row, result);
                                row.children = tableRow2ChildrenList(
                                    row,
                                    result,
                                    this.queryData.sourceTypes
                                );
                                console.log(row.children+row.id)
                            });

                    })
                );
            };
            this.tableLoading = true;
            this.tableData = [];
            w();
            w1().finally(() => {
                this.tableLoading = false;
            });
            return;

            this.loadTable();

        },
        loadTable() {
            get("/log-records/admin-record-list", {
                startTime: this.queryData.startTime ? (this.queryData.startTime.format(this.format.dateFormat) + " 00:00:00") : null,
                endTime: this.queryData.endTime ? (this.queryData.endTime.format(this.format.dateFormat) + " 23:59:59") : null,
                groupId: this.queryData.groupId ? this.queryData.groupId : null,
            }, true,)
        },
        groupLog(data, title) {
            this.groupLogFormVisible = true;
            this.groupLogFormTitle = title;
            this.groupLogGrupId = data.id;
            this.groupLogGrupName = data.name;
        },
        dataShow(row, k) {
            if (row[k]) {
                let c = row[k].allCount.toFixed(0);
                let rc = row[k].realAllCount.toFixed(0);
                if (this.queryData.times) {
                    c = row[k].todayCount.toFixed(0);
                    rc = row[k].realTodayCount.toFixed(0);
                }
                return rc;
                if (this.selectData.dataType === "real") return rc;
                if (this.selectData.dataType === "noReal") return c - rc;
                return `${c} / <span  ${
                    rc !== c ? 'class="red"' : ""
                }>${rc} </span>`;
            }
            return "0/0";
        },
    }
};
</script>

<style lang="scss" scoped>
.chartBody {
    width: 100%;
    height: 400px;
    margin-bottom: 20px;
    display: flex;
}

.chartClass {
    width: 100%;
    height: 350px;
}

.body-content-info {
    margin-top: 20px;
    width: 50%;
    border: 1px solid #f1f1f1;
    padding-bottom: 1em;
    padding-left: 1em;

}

.school-logo {
    .logo-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 108px;
        height: 108px;
        line-height: 108px;
        text-align: center;
    }

    .logo-img {
        width: 108px;
        height: 108px;
        display: block;
    }
}

.table-edit-from {
    .address-select {
        width: 8em;
        margin-right: 2em;
    }
}
</style>
<style>
.school-logo .logo-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.school-logo .logo-uploader .el-upload:hover {
    border-color: #409eff;
}
</style>
